<template>
  <ex-dialog
    width="70%"
    class="ex-diolog"
    title="监管平台数据同步"
    :visible="visible"
    @closeDialog="handleClose"
    v-loading="loading"
  >
    <div class="detail">
      <div class="detail_title">基本信息</div>
      <div class="detail_box">
        <div class="detail_box_one">商户名称：{{ data.shopName==''?'-':data.shopName }}</div>
        <div class="detail_box_one">联系电话：{{ data.phone==''?'-':data.phone }}</div>
        <div class="detail_box_one">
          所属行业：{{ data.shopTypeParentName==''?'-':data.shopTypeParentName }}
        </div>
        <div class="detail_box_one">所属详细分类：{{ data.shopTypeName==''?'-':data.shopTypeName }}</div>
        <div class="detail_box_one">入驻时间：{{ data.createTime==''?'-':data.createTime }}</div>
        <div class="detail_box_one">商户经营地址：{{ data.address==''?'-':data.address }}</div>
      </div>
    </div>
    <div class="detail">
      <div class="detail_title">证照信息</div>
      <div class="detail_box">
        <div class="detail_box_one">经营者名称：{{ data.merchantName==''?'-':data.merchantName }}</div>
        <div class="detail_box_one">
          统一社会信用代码/组织机构代码：{{ data.businessLicenseNumber==''?'-':data.businessLicenseNumber }}
        </div>
        <div class="detail_box_one" v-if="data.merchantType == 1">
          企业类型：企业
        </div>
        <div class="detail_box_one" v-if="data.merchantType == 2">
          企业类型：个人
        </div>
        <div class="detail_box_one">注册资金：{{ data.registeredFund==''?'-':data.registeredFund }}<span v-if="data.registeredFund!=''">万</span></div>
        <div class="detail_box_one">法人姓名：{{ data.name==''?'-':data.name }}</div>
        <div class="detail_box_one">注册地址：{{ data.registeredAddress==''?'-':data.registeredAddress }}</div>
        <div class="detail_box_one" v-if="data.type!=2">
          电子营业执照：<span class="business" @click="dialogVisible = true"
            >营业执照.jpg</span
          >
          <el-upload
            class="upload-demo"
            :action="action2"
            :accept="accept"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :show-file-list="false"
            :on-success="upSuccess"
            :on-error="onError"
          >
            <el-button size="small" type="primary" v-if="data.govStatus != 3"
              >点击上传</el-button
            >
          </el-upload>
        </div>
      </div>
    </div>
    <div class="detail" v-if="data.type!=2">
      <div class="detail_title">存管比例设置</div>
      <div class="detail_box">
        <!-- <div class="detail_box_one">
          <span class="import">*</span>企业信用评级：<el-input
            class="elinputs"
            placeholder="A+、A、B、C"
            v-model="filter.creditLevel"
          ></el-input>
        </div> -->
        <!-- <div class="detail_box_one">
          <span class="import">*</span>企业信用分：<el-input
            class="elinputs"
            placeholder="请输入数值"
            v-model="filter.creditScore"
          ></el-input>
        </div> -->
        <div class="detail_box_one">
          <span class="import">*</span>存管比例：<el-input
            class="elinputs"
            placeholder="请输入"
            v-model="filter.superviseRatio"
          >
            <template slot="append">%</template>
          </el-input>
        </div>
        <!-- <div class="detail_box_one" style="width: 100%">
          <span class="import">*</span>存管释放规则：<span
            >每张卡消耗卡充值金额的</span
          ><el-input
            class="elinputs2"
            placeholder="请输入"
            v-model="filter.initReleaseRatio"
          >
            <template slot="append">%</template>
          </el-input>
          <span>释放一次，消耗达</span>
          <el-input
            class="elinputs2"
            placeholder="请输入"
            v-model="filter.maxReleaseRatio"
          >
            <template slot="append">%</template>
          </el-input>
          <span>全部释放</span>
        </div> -->
      </div>
    </div>
    <template slot="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="depositSumit" :loading="sumitLoading">数据上传</el-button>
    </template>
    <el-dialog title="营业执照" :visible.sync="dialogVisible" append-to-body>
      <div class="img_box">
        <img
          class="img_boximg"
          style="width: 100%"
          :src="filter.businessLicenseImg"
          alt=""
        />
      </div>
    </el-dialog>
  </ex-dialog>
</template>
<script>
// api
import { govdetail, govUpdate } from "@/api/merchants";

export default {
  props: {
    visible: Boolean,
    id: String,
    merchantId: String
  },
  data() {
    return {
      loading:false,
      img_url: this.$IMG_URL,
      data: {},
      dialogVisible: false,
      accept: ".png,.jpg",
      action: process.env.VUE_APP_BASE_API + "/common/v1/uploadFile",
      action2: process.env.VUE_APP_BASE_API + "/common/v1/watermarkUploadFile",
      filter: {
        merchantId: "", //商户id
        creditLevel: "", //信用评级
        creditScore: "", //信用分
        superviseRatio: "", //监管比例
        initReleaseRatio: "", //初始释放比例
        maxReleaseRatio: "", //最大释放比例
        businessLicenseImg: "", //营业执照
        type:"",//商户注册状态 1.正常 2.待使用
      },
      sumitLoading: false,
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    getDetail() {
      this.loading = true
      var params = {
        id: this.id,
        merchantId: this.merchantId
      }
      govdetail(params).then((res) => {
        console.log("获取详情", res);
        const { result } = res;
        this.data = result;
        this.filter.creditLevel = result.creditLevel;
        this.filter.creditScore = result.creditScore;
        this.filter.superviseRatio = result.superviseRatio;
        this.filter.initReleaseRatio = result.initReleaseRatio;
        this.filter.maxReleaseRatio = result.maxReleaseRatio;
        this.filter.merchantId = result.merchantId;
        this.filter.type = result.type
        this.filter.businessLicenseImg = result.businessLicenseImg;
        this.loading = false
      });
    },
    upSuccess(res) {
      console.log(res);
      this.filter.businessLicenseImg = res.result.url;
      this.$message({
        message: "上传成功",
        type: "success",
        duration: 1500,
      });
    },
    onError(err) {
      console.log(err);
      this.$message({
        message: "上传失败请重新上传",
        type: "error",
        duration: 1500,
      });
    },
    depositSumit() {
      //数据上传
      var params = {
        ...this.filter,
      };
      if (this.filter.superviseRatio === ""&&this.filter.type!=2) {
        this.$message({
          message: "请输入存管比例",
          type: "warning",
          duration: 1500,
        });
        return;
      }
      this.sumitLoading = true
      govUpdate(params).then((res) => {
        this.$message({
          message: "上传成功",
          type: "success",
          duration: 1500,
        });
        setTimeout(() => {
          this.$emit("update:visible", false);
          this.$emit("success");
          this.sumitLoading = false
        }, 800);
      });
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
  }
  .grid-layout {
    width: 560px;
    margin: 0 auto;
  }
  .img {
    display: block;
    width: 100px;
    height: auto;
  }
  .detail {
    margin-bottom: 20px;
  }
  .detail_title {
    color: #000;
    font-size: 16px;
    border-left: 4px solid #1890ff;
    padding-left: 10px;
  }
  .detail_box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px 26px 0;
  }
  .detail_box_one {
    width: 50%;
    font-size: 15px;
    color: #333;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  }
  .business {
    color: #1890ff;
    cursor: pointer;
    margin-right: 10px;
  }
  .business:hover {
    opacity: 0.8;
  }
  .import {
    color: #fa2020;
  }
  .elinputs {
    width: 50%;
  }
  .elinputs2 {
    width: 160px;
    margin: 0 10px;
  }
  .img_box {
    width: 80%;
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  }
  .img_boximg {
    width: 80%;
  }
}
</style>
